<template>
    <div  style="height:1500px; display: flex; flex-direction: column; overflow: hidden;">
      <el-scrollbar style="flex: 1; --el-scrollbar-bg-color: #f0f2f5;">
     <!-- 养殖信息模块 -->
     <div class="breeding-card" style="margin-left: 0px;">
          <div class="card-header">
            <h2>养殖信息  <el-button size="big" type="primary" @click="open()">设置</el-button></h2>
           
          </div>
          <div class="info-grid">
            <div class="info-row">
              <span>品种：{{ form.Variety }}</span>
              <span>来源：{{ form.Source }}</span>
            </div>
            <div class="info-row">
              <span>饲养天数：{{ form.Feedingdays}}</span>
              <span>饲料品牌：{{ form.Feedbrand }}</span>
            </div>
            <div class="info-row">
              <span>饲养负责人：{{ form.Manager }}</span>
              <span v-if="breedsc">出栏日期：{{ moment(form.Dateslaughter).format("YYYY-MM-DD") }}</span>
              <span v-else>出栏日期：{{form.Dateslaughter}}</span>
            </div>
          </div>
        </div>
        <!-- 保健信息 -->
    <div style="margin-top: 50px ;margin-left: 20px;">
        <div class="healthcare-container">
          <div class="breeding-card" style="margin-left: 0px;">
    <div class="card-header">
      <h2>保健信息  <el-button @click="showNewRow" icon="Plus" type="primary" style="width:70px">新增行</el-button></h2>
    </div>

    <!-- 数据表格 -->
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column 
        v-for="(col, index) in columns"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        width="180"
      >
        <!-- 自定义新增行输入框 -->
        <template v-if="col.prop === 'operation'" #default="{ row }">
          <div class="action-group">
            <template v-if="!row.edit">
              <el-link type="primary" @click="editRow(row)">修改</el-link>
              <el-link type="danger" @click="Deletemmune(row)">删除</el-link>
            </template>
            <template v-else>
              <el-link type="primary" @click="saveRow(row)">保存</el-link>
              <el-link @click="cancelEdit(row)">取消</el-link>
            </template>
          </div>
        </template>
        <!-- 可编辑单元格 -->
        <template v-else #default="{ row }">
          <div v-if="!row.edit">{{ row[col.prop] }}</div>
          <el-input v-else v-model="row.editData[col.prop]" size="small" />
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 新增行 -->
  <div v-if="newRow.visible" class="new-row">
    <el-form :model="newRow.data" inline>
      <el-form-item 
        v-for="(col, index) in columns.filter(c => c.prop !== 'operation')"
        :key="index"
        :label="col.label"
      >
        <el-input v-model="newRow.data[col.prop]" />
      </el-form-item>
      <el-form-item>
        <div class="action-group">
          <el-button type="primary" @click="addRow">保存</el-button>
          <el-button @click="cancelAdd">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
  </div>
    </div>
        <!-- 动检图 -->
    <div style="margin-top: 50px ;margin-left: 20px;"class="breeding-card" >
        <h2>动检图</h2>
        <!-- 图片容器 -->
  <div style="display: flex; align-items: flex-start; gap: 25px; margin-left: 20px;">
     
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList1"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 103, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div>

  </div>
<!-- 企业信息 -->
  <div style="margin-top: 50px;margin-left: 20px;" class="breeding-card" >
        <h2>企业信息  <el-button size="big" type="primary" @click="open1()">设置</el-button></h2>
    <div class="info-grid"  style="margin-left: 20px;">
            <div class="info-row">
              <span>养殖场：{{ enterpe.EntName }}</span>
              <span>负责人：{{ enterpe.PersonName }}</span>
            </div>
            <div class="info-row">
              <span>存栏数量：{{ enterpe.Quantity }} 只</span>
            </div>
          </div>
          </div>
        <!--企业照片 -->
<div style="margin-top: 50px;margin-left: 20px; "  class="breeding-card" >
        <h2>企业照片</h2>
  
        <!-- 图片容器 -->
  <div style="display: flex; align-items: flex-start; gap: 25px;margin-left: 20px;">
    
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 104, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
 
  </div> 
</div>
</el-scrollbar>
</div>
<!-- 企业信息弹框 -->
<el-dialog v-model="dialogFormVisible1" title="企业信息" width="500">
    <el-form :model="enterpe">
      <el-form-item label="企业名称">
        <el-input v-model="enterpe.EntName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="负责人">
        <el-input v-model="enterpe.PersonName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="存栏数量" >
        <el-input v-model="enterpe.Quantity" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addenter()">确认</el-button>
      </div>
    </template>
  </el-dialog>
<!-- 养殖信息弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="养殖信息" width="500">
    <el-form :model="form">
      <el-form-item label="品种" :label-width="formLabelWidth">
        <el-input v-model="form.Variety" autocomplete="off" />
      </el-form-item>

      <el-form-item label="来源" :label-width="formLabelWidth">
        <el-input v-model="form.Source" autocomplete="off" />
      </el-form-item>

      <el-form-item label="饲养天数" :label-width="formLabelWidth">
        <el-input v-model="form.Feedingdays" autocomplete="off" />
      </el-form-item>

      <el-form-item label="饲料品牌" :label-width="formLabelWidth">
        <el-input v-model="form.Feedbrand" autocomplete="off" />
      </el-form-item>

      <el-form-item label="饲养负责人" :label-width="formLabelWidth">
        <el-input v-model="form.Manager" autocomplete="off" />
      </el-form-item>

     <div style="margin-left: 72px;">
        <el-form-item label="出栏日期" >
        <el-date-picker  v-model="form.Dateslaughter"type="date"format="YYYY/MM/DD"value-format="YYYY-MM-DD"/>
      </el-form-item>
     </div>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddBreed()">确认</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
  import type { ImageProps } from 'element-plus';
  import { ref, reactive, onMounted } from 'vue';
  import moment, { isDate } from 'moment'
  import axios from 'axios';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useCounterStore } from '@/stores/counter';
  import { useRouter, useRoute } from 'vue-router';
  import type { UploadProps, UploadUserFile } from 'element-plus';
  let route=useRoute();
  const tableData =ref([])
  const dialogFormVisible = ref(false)
  const dialogFormVisible1 = ref(false)
const formLabelWidth = '140px'
// 表格配置
const columns = [
  { prop: 'days', label: '饲养天数' },
  { prop: 'immunesystem', label: '保健方式' },
  { prop: 'immunemethods', label: '保健方法' },
  { prop: 'operation', label: '操作' }
]
//保健信息
const dataList = ref<any>([]);

// 养殖所需数据
const form = reactive({
    Variety: '',
    Source: '',
    Feedingdays: '',
    Feedbrand: '',
    Manager: '',
    Dateslaughter: '',
    Batch:route.query.batch,
})
//企业信息弹框
const open1=()=>{
    dialogFormVisible1.value=true;
}

//存储企业信息变量
const enterads=ref([]);
//查询企业信息
const getenter=()=>{
    axios({
        url:'http://localhost:5011/api/Product/QueryEnter',
        method:'get',
        params:{
          Batch:route.query.batch
        }
    })
    .then(res=>{
        if(res.data.code==101){
          console.log('企业信息asfasdeg',res.data)
            enterads.value=res.data.data;
            console.log('企业信息asfasdeg',enterads.value)
            enterpe.EntName=res.data.data.entName
            enterpe.PersonName=res.data.data.personName
            enterpe.Quantity=res.data.data.quantity
            enterpe.Quantity=res.data.data.quantity
        }
    })
}
// 企业所需数据
const enterpe=reactive({
    EntName:'',
    PersonName:'',
    Quantity:'',
    Batch:route.query.batch
})
//添加企业信息方法
const addenter=()=>{
    axios({
        url:'http://localhost:5013/api/Shop/AddEnter',
        method:'post',
        data:enterpe
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success("操作成功");
            dialogFormVisible1.value=false;
            getenter();
        }
    })
}
//生命周期钩子函数
onMounted(()=>{
    getbreedlist();//查询养殖信息
    getImmunelist();//查询保健信息
    getbreedAll();//查询养殖模块信息完成度
    selePic2();
    selePic3();
    getenter();
})
const poiuyt=ref([]);
//查询养殖模块信息完成度
  const getbreedAll=()=>{
    axios({
      url:'http://localhost:5011/api/Product/QueryBreedAll',
      method:'get',
      params:{
        ProId:route.query.proId,
        Batch:route.query.batch     
       }
    }).then(res=>{
      if(res.data.code==101){
        poiuyt.value=res.data.data
        console.log('养殖信息完成度',poiuyt.value)
      }
    })
  }

//添加养殖信息弹窗
const open=()=>{
    dialogFormVisible.value=true;
}
//添加养殖信息方法
const AddBreed=()=>{
    axios({
        url:'http://localhost:5013/api/Shop/AddBreed',
        method:'post',
        data:form
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success('操作成功');
            dialogFormVisible.value=false; 
            getbreedlist();
        }
    })
}
//存储养殖信息数据变量
const breedsc=ref([]);
//查询养殖信息方法
const getbreedlist=()=>{
  console.log('生产批次',route.query.batch)
    axios({
        url:'http://localhost:5011/api/Product/QueryBreed',
        method:'get',
        params:{
          Batch:route.query.batch
        }
    })
    .then(res=>{
        if(res.data.code==101){
          console.log('生产批次',route.query.batch)
          console.log('养殖信息',res.data.data)
            breedsc.value=res.data.data
            form.Variety=res.data.data.variety
            form.Source=res.data.data.source
            form.Feedingdays=res.data.data.feedingdays
            form.Feedbrand=res.data.data.feedbrand
            form.Manager=res.data.data.manager
            form.Dateslaughter=res.data.data.dateslaughter
            form.Batch=res.data.data.batch
        }
    })
}


// 新增行状态
const newRow = reactive({
  visible: false,
  data: {
    days: null,
    immunesystem: '',
    immunemethods: '',
    batch:route.query.batch
  }
})
// 显示新增行
const showNewRow = () => {
  newRow.visible = true
}

//添加保健数据
const addimmune=()=>{
  axios({
    url:'http://localhost:5013/api/Shop/AddImmune',
    method:'post',
    data:newRow.data
  })
  .then(res=>{
    if(res.data.code==101){
      ElMessage.success('操作成功');
      getImmunelist();
    }
  })
}
// 保存新增行
const addRow = () => {
  addimmune();
  dataList.value.push({
    id: Date.now(),
    ...newRow.data,
    edit: false,
    editData: {}
  })
  newRow.visible = false
  newRow.data = { days: null, methodType: '', method: '' }
}
// 取消新增
const cancelAdd = () => {
  newRow.visible = false
  newRow.data = { days: null, methodType: '', method: '' }
}
// 行编辑逻辑
const editRow = (row:any) => {
  row.edit = true
  row.editData = { ...row }
  console.log('极其重要',row.editData)
}
//修改保健信息
const updateunmme=(row:any)=>{
  axios({
    url:'http://localhost:5013/api/Shop/UpdateImmune',
    method:'put',
    data:{
      immuneId:row.immuneId,
      days:row.days,
      immunesystem:row.immunesystem,
      immunemethods:row.immunemethods,
      batch:row.batch,
    }
  }).then(res=>{
    if(res.data.code==101){
      ElMessage.success('操作成功')
    }
  })
}



const saveRow = (row:any) => {
  Object.assign(row, row.editData)
  console.log('asfdasdfgvasdf',row,row.editData)
  updateunmme(row);
  row.edit = false
}

const cancelEdit = (row:any) => {
  row.edit = false
}
//删除保健信息方法
const Deletemmune=(row:any)=>{
  ElMessageBox.confirm(
    '您确认要操作嘛?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>{
    axios({
    url:'http://localhost:5013/api/Shop/DeleteImmune',
    method:'put',
    data:{
      immuneId:row.immuneId
    }
  })
  .then(res=>{
    if(res.data.code==101){
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getImmunelist();
    }
  })
  .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
  })
 

}

// // 删除行
// const deleteRow = (row:any) => {
//   Deletemmune(row)
// }
//图片所需数据
const fileList = ref<UploadUserFile[]>([]);
  const fileList1 = ref<UploadUserFile[]>([]);
    const fileList2 = ref<UploadUserFile[]>([]);
  const dialogImageUrl2 = ref('');
  const dialogImageUrl3 = ref('');

const dialogImageUrl = ref('');
  const dialogVisible = ref(false);
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  deletepic(uploadFile.name);
    console.log(uploadFile, uploadFiles);
  };
  //删除图片
const deletepic=(pictrueId:any)=>{
  axios({
    url:'http://localhost:5013/api/Pic/DeletePic',
    method:'put',
    data:{
      pictureId:pictrueId
    }
  })
  .then(res=>{
    if(res.data.code==101){
      ElMessage.success("操作成功");
    }
  })
}
  
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
  };
    // 查询图片
    const syoo = reactive({
    PicType: 103,
    Batch: route.query.batch
  });
    // 查询图片产品检验报告
    const selePic2 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: syoo.PicType, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList1.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};


    // 查询图片企业图片
  const selePic3 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 104, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};
//存储保健信息数据的变量
const immune=ref([]);

// 查询保健信息
const getImmunelist = () => {
  axios({
    url: 'http://localhost:5011/api/Product/QueryImmune',
    method: 'get',
    params: {
      Batch: route.query.batch
    }
  })
  .then(res => {
    if (res.data.code === 101) {
      dataList.value = res.data.list;
       console.log('保健信息数据', dataList.value);
      // // 将获取的数据赋值给 dataList
      // dataList.value = immune.value.map(item => ({
      //   ...item,
      //   edit: false,
      //   editData: {}
      // }));
    }
  });
};

</script>

<style scoped>
  .full-container {
    height: 100vh;
    overflow: hidden;
    background: #f0f2f5;
  }
  
  .nav-bar {
    height: 48px;
    background: #545c64;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  
  .nav-item {
    color: white;
    margin-right: 40px;
    cursor: pointer;
  }
  
  .main-content {
    height: calc(100vh - 48px);
    padding: 20px;
    overflow: auto;
  }
  
  .breeding-card,
  .healthcare-card {
    background: white;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .info-grid {
    display: grid;
    gap: 16px;
  }
  
  .info-row {
    display: flex;
    gap: 40px;
    padding: 8px 0;
  }
  
  .data-table {
    margin-top: 16px;
  }
  
  .action-group {
    display: flex;
    gap: 12px;
  }
  
  .new-form {
    margin-top: 16px;
    padding: 16px;
    background: #fafafa;
    border-radius: 4px;
  }
  
  .form-actions {
    margin-top: 12px;
    display: flex;
    gap: 12px;
  }
  </style>
  <style scoped>


  /* 按钮样式统一 */
  .el-button {
    border-radius: 4px;
    padding: 8px 15px;
  }
  </style>